<template>
  <el-card style="min-height: 460px;" shadow="never" :body-style="{ padding: '20px' }">
    <template #header>
      <img class="mark" src="@/assets/goods/order/bookmarks.svg" alt="" />
      <span>经营阶段设置</span>
    </template>
    <div class="mt20 content">
      <div v-show="tableHeight && showTree" :style="`height: ${tableHeight}px;position: relative;`">
        <div class="left" :style="`height: ${tableHeight}px;`">
          <div class="left-top">
            <div class="">经营类型</div>
            <div class="">
              <img style="width: 30px; height: 30px" @click="handleEdge" :src="showTree ? imgs[1] : imgs[0]" />
            </div>
          </div>
          <el-tree
            ref="classifyTreeRef"
            class="mt-2"
            node-key="id"
            :data="followTypeList"
            :props="{ label: 'typeName', children: 'children' }"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            highlight-current
            default-expand-all
            @node-click="itemClick"
          />
          <div class="buttons">
            <div class="button" @click="handleAddClassify">
              <el-icon>
                <CirclePlus />
              </el-icon>
              <div>新增类型</div>
            </div>
            <div class="button" @click="handleEditClassify">
              <el-icon>
                <Edit />
              </el-icon>
              <div>编辑类型</div>
            </div>
            <div class="button" @click="handleDelClassify">
              <el-icon>
                <Delete />
              </el-icon>
              <div>删除类型</div>
            </div>
          </div>
        </div>
      </div>

      <el-card ref="table" shadow="always" :body-style="{ padding: '20px' }" :class="{ 'w-tree': showTree, 'w-all': !showTree }">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" @click="handleAdd(currentItem)" v-hasPermi="['order:followStage:add']">添加阶段 </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" :disabled="!multiple" @click="handleBatchDelete" v-hasPermi="['order:followStage:remove']">删除 </el-button>
          </el-col>
          <!-- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> -->
        </el-row>
        <el-table :height="'calc(100vh - 422px)'" v-loading="loading" :data="dataSource" @selection-change="handleSelectionChange" size="large">
          <el-table-column type="selection" width="55" align="center" :selectable="selectHandle" />
          <!-- <el-table-column label="#" type="index"> </el-table-column> -->
          <el-table-column label="进度系数" align="center" prop="progressCoefficient" width="150" />
          <el-table-column label="阶段名称" align="center" prop="name" width="200" />
          <el-table-column label="跟单类型" align="center" prop="followTypeName" width="200" />
          <el-table-column label="跟单状态" align="center" prop="stageName" width="200">
            <template #default="scope">
              {{ selectDictLabel(follow_stage, scope.row.stageName) }}
            </template>
          </el-table-column>
          <el-table-column label="开启审核" align="center">
            <template #default="scope">
              <el-radio-group v-model="scope.row.status">
                <el-switch v-model="scope.row.status" active-value="1" inactive-value="0" @change="changeStatus(scope.row)"></el-switch>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column label="审核人" align="center" prop="auditUserId">
            <template #default="scope">
              {{ getAuditUserName(scope.row.auditUserId) }}
            </template>
          </el-table-column>
          <!-- <el-table-column label="排序" align="center" prop="sort" width="80" /> -->
          <!-- <el-table-column label="创建时间" align="center" prop="createTime" /> -->
          <!-- <el-table-column label="备注" align="center" prop="remark" /> -->
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button v-hasPermi="['order:followStage:edit']" type="text" @click="handleEdit(scope.row)">编辑</el-button>
              <el-divider v-hasPermi="['order:followStage:edit']" direction="vertical"></el-divider>
              <el-button v-hasPermi="['order:followStage:remove']" type="text" @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page.sync="queryParams.pageNum"
          v-model:limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-card>
    </div>
  </el-card>

  <div class="fixed-icon" @click="handleEdge" v-show="!showTree">
    <el-icon>
      <DArrowRight />
    </el-icon>
  </div>
  <addForm ref="modelForm" @ok="getList"></addForm>
  <AddFormType ref="addFormType" @ok="addTypeOk"></AddFormType>
</template>

<script>
import addForm from './modules/addForm.vue';
import AddFormType from '@/views/goods/followType/modules/addForm';
import listMixin from '@/mixins/listMixin';
import { updateFollowStage } from '@/api/goods/followStage';
import request from '@/utils/request';
import zk from '@/assets/images/zhankai.svg';
import zd from '@/assets/images/zhedie.svg';
import { listFollowType, delFollowType } from '@/api/goods/followType';
export default {
  data() {
    return {
      queryParams: {
        orderNo: '',
        pageNum: 1,
        pageSize: 10,
        typeCategory:0
      },
      urls: {
        list: '/order/followStage/list',
        delete: '/order/followStage'
      },
      follow_stage: [],
      imgs: [zk, zd],
      tableHeight: 0,
      followTypeList: [],
      showTree: true,
      currentItem: {}
    };
  },
  components: {
    addForm,
    AddFormType
  },
  mixins: [listMixin],
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.tableHeight = this.$refs.table.$el.scrollHeight;
      }, 200);
    });
    this.listSysUser();
    this.getDicts(['follow_stage']);
    this.listFollowType();
  },
  methods: {
    addTypeOk() {
      this.$nextTick(() => {
        this.$refs.modelForm.listFollowType()
      })
      this.listFollowType()
    },
    // 获取跟单类型
    listFollowType() {
      listFollowType({
        pageSize: 9999,
        pageNum: 1,
        
        typeCategory:0
      })
        .then((res) => {
          let arr = (res.rows || []).map((v) => ((v.children = []), v));
          this.followTypeList = [
            {
              id: '',
              typeName: '全部',
              children: arr
            }
          ];
        })
        .catch((err) => {
          console.log(err);
        });
    },
    changeStatus(form) {
      updateFollowStage(form)
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            this.$modal.msgSuccess('操作成功');
            if (close) {
              this.open = false;
            }
            this.$emit('ok');
          } else {
            this.$modal.msgError(res.msg);
          }
        })
        .catch((err) => {
          this.loading = false;
          console.log('err :>> ', err);
        });
    },
    getAuditUserName(value) {
      if (value) {
        let auditUser = this.userList.find((array) => array.userId === value);
        return auditUser && auditUser.auditUserName ? auditUser.auditUserName : '';
      }
    },
    getList() {
      this.loading = true;
      var params = {
        url: this.urls.list,
        method: 'get',
        params: this.getQueryParams() //查询条件
      };
      request(params).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.dataSource = res.rows;
          this.total = res.total;
          if (typeof this.listAfter === 'function') {
            this.listAfter();
          }
        } else {
          this.$modal.msgError(res.msg);
        }
      });
    },

    listAfter() {
      this.$nextTick(() => {
        setTimeout(() => {
          this.tableHeight = this.$refs.table.$el.scrollHeight;
        }, 200);
      });
    },

    itemClick(item) {
      this.currentItem = item;
      this.queryParams.followTypeId = item.id;
      this.getList();
    },

    handleAddClassify() {
      this.$refs.addFormType.add({
        typeCategory:0});
    },
    handleEditClassify() {
      console.log(this.currentItem, 'this.currentItem');
      if (!this.currentItem || !this.currentItem.id) {
        this.$message.warning('请选择类型');
        return;
      }
      this.$refs.addFormType.edit(this.currentItem);
    },
    handleDelClassify() {
      if (!this.currentItem) {
        this.$message.warning('请选择类型');
        return;
      }
      this.$modal
        .confirm('确定删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          request({
            url: '/order/followType/' + this.currentItem.id,
            method: 'delete'
          }).then((res) => {
            if (res.code == 200) {
              this.$modal.msgSuccess('删除成功');
              this.currentItem = {};
              this.listFollowType();
            } else {
              this.$modal.msgError(res.msg);
            }
          });
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.phone-bg {
  width: 380px;
  height: 760px;
  background-size: 100% 100%;
  margin-top: 40px;
  position: fixed;
  border: 1px solid #ccc;

  .content {
    position: relative;
    border: 1px solid #ccc;
    height: 760px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 30px;
    margin-top: 40px;

    .page {
      position: absolute;
    }

    .bg {
      position: fixed;
      width: 100%;
      width: 380px;
      height: 760px;
    }
  }
}

.mark {
  width: 18px;
  margin-right: 10px;
}

.phone-frame {
  position: relative;
  width: 380px;
  height: 760px;
  background-image: url('@/assets/images/iphonex.png');
  background-size: cover;
}

.ui-container {
  position: absolute;
  top: 20px;
  left: 18px;
  width: 344px;
  height: 720px;
  overflow: auto;
  border-radius: 36px;

  // 隐藏滚动条
  &::-webkit-scrollbar {
    display: none;
  }
}

.ui-container img {
  width: 100%;
  display: block;
  border-radius: 36px;
}
.left {
  width: 240px;
  border: 1px solid #e6ebf5;
  // position: relative;
  border-radius: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 60px;

  .fodder_list {
    z-index: 20;

    .fodder_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      cursor: pointer;

      .box {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        svg {
          margin-right: 10px;
        }

        .fodder_name {
          font-size: 14px;
          color: #303133;
          width: 84px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    .fodder_item.active,
    .fodder_item:hover {
      background-color: #f5f5f5;
    }
  }

  .buttons {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    position: absolute;
    bottom: 1px;
    width: 238px;
    border-top: 1px solid #e6ebf5;
    background-color: #fff;
    z-index: 21;
    font-size: 12px;
    color: #303133;

    .button {
      cursor: pointer;
      padding: 10px;
      text-align: center;

      i {
        margin-right: 5px;
      }
    }

    .button:not(:last-child) {
      border-right: 1px solid #e6ebf5;
    }

    .button:hover {
      color: #409eff;
    }
  }
}

.left-top {
  display: flex;
  justify-content: space-between;
  padding: 6px 20px;
  border-bottom: 1px solid #e6ebf5;
  align-items: center;

  .box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 24px;
    color: #303133;
    font-weight: bold;
  }
}
.fixed-icon {
  position: fixed;
  //left: 0;
  top: 400px;
  z-index: 999;
  background-color: #409eff;
  padding: 12px 2px;
  color: #fff;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  display: flex;
  cursor: pointer;
}

.content {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.w-tree {
  width: calc(100% - 260px);
}

.w-all {
  width: 100%;
}
</style>